<template>
	<div>
		<header id="header" class="mui-bar mui-bar-nav">
			<i style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" v-on:click="back"></i>
			<h1 class="mui-title" style="color: #fff;">好房头条</h1>
		</header>
		<div class="consult">
			<!--<img src="static/images/consult.png"/>-->
			<ul class="conConsult">
				<li v-for="item in data" @click="goDetail(item.informationId)">
					<img :src=item.informationImg alt="" v-if="item.informationImg" />
					<img src='static/images/none.jpg' alt="" v-if="!item.informationImg"/>
					<div>
						<h3>{{item.informationTitle}}</h3>
						<p>{{item.informationTime}}</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="btnMore">加载更多</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
			  data:[]
			}
		},
		created: function(){
			this.artList(1);
		},
		mounted: function() {
		    let that=this;
		    let i=1;
	    	$('.btnMore').click(function(){
	    		i++;
	    		that.artList(i);
	    	})
	   },
		methods:{
			back() {
				this.$router.go(-1); //返回上一层
			},
			artList(num){
				let ajaxURL=localStorage.getItem('ajaxURL');
				let city=localStorage.getItem('city');
				let that=this;
				$.ajax({
				    url:`${ajaxURL}/houseweb/H5/houseArticle.do`,
		//	        url:`http://192.168.0.162:8080/houseweb/H5/houseArticle.do`,
					type:'get',
					cache:false,
					async:false,
					data:{
					  "city":city,
					  "page":num
					},
					success:function(res){
						var dataer = JSON.parse(res)
						for(var i=0;i<dataer.data.information.length;i++){
							that.data.push(dataer.data.information[i]);
						}
					  
					}
			     });
			},
		    goDetail(id){
		        this.$router.push({
		          path: '/dongtaixiangqing',
		          name: 'dongtaixiangqing',
		          query: {
		            id: id
		          }
		          /*query: {
		              name: 'name',
		              dataObj: this.msg
		          }*/
		        })
		
		      }
		}
	}
</script>
<style scoped>
	.mui-bar-nav {
		position: fixed;
		top: 0;
		height: 50px;
		background-color: #0186c2;
		box-shadow: none;
	}

	.mui-bar-nav a {
		color: #fff;
	}

	.mui-bar-nav.mui-bar .mui-icon {
		padding-top: 12px;
	}

	.mui-bar .mui-title {
		line-height: 50px;
	}

	.header {
		position: fixed;
		top: 50px;
		background-color: #fff;
	}

	.mui-segmented-control .mui-control-item {
		color: #000;
		border-color: #fff;
	}

	.mui-segmented-control {
		border-color: #fff;
	}

	.mui-segmented-control .mui-control-item.mui-active {
		background: #fff;
		color: #0186c2;
		border-bottom: 1px solid #0186c2;
	}

	.mui-segmented-control .mui-control-item {
		line-height: 30px;
	}
	.consult {
		width: 100%;
		height: auto;
		padding-top: 50px;
	}
	.consult img {
		width: 100%;
	}
	.conConsult {
		margin: 0;
		list-style: none;
		padding:15px 15px 0;
	    background-color: #fff;
	}
	.conConsult li {
		height: 100px;
		padding-bottom: 10px;
		border-bottom: 1px solid #ccc;
		margin-bottom: 10px;
		position: relative;
	}
	.conConsult img {
		width: 36vw;
		height: 90px;
	}
	.conConsult li div {
		position: absolute;
		left: 40vw;
		top: 0;
		width: 56vw;
		height: 90px;
	}
	.conConsult li div h3 {
		font-size: 16px;
		width: 94%;
		line-height: 24px;
		overflow: hidden;
		font-weight: normal;
		margin-top: 0;
	}
	.conConsult li div p {
		position: absolute;
		bottom: -5px;
		font-size: 12px;
		margin: 0;
	}
	.btnMore {
		width: 100vw;
		height: 40px;
		line-height: 40px;
		background-color: #F8F8F8;
		color: #333;
		font-size: 14px;
		text-align: center;
		margin-bottom: 65px;
	}
</style>
